<template>
    <div id="vocation">
        <!-- 查询 -->
        <el-card>
            <el-form :inline="true">
                <el-form-item label="审批状态">
                    <el-select v-model="filterForm.applyState" size="small">
                        <el-option label="全部" :value="0"></el-option>
                        <el-option label="待审批" :value="1"></el-option>
                        <el-option label="审批中" :value="2"></el-option>
                        <el-option label="审批拒绝" :value="3"></el-option>
                        <el-option label="审批通过" :value="4"></el-option>
                        <el-option label="作废" :value="5"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="getLeaveList" size="small">查询</el-button>
                    <!-- <el-button type="primary" @click="onSubmit">重置</el-button> -->
                </el-form-item>
            </el-form>
        </el-card>

        <!-- 申请列表 -->
        <el-card style="margin-top: 15px">
            <!-- 新建申请休假 -->
            <el-button type="primary" size="small" @click="dialogFormVisible = true">申请休假</el-button>
            <!-- 申请休假~对话框dialog -->
            <el-dialog title="申请休假" :visible.sync="dialogFormVisible" :before-close="beforeClose">
                <el-form :model="leaveForm" label-width="80px">
                    <el-form-item label="休假类型">
                        <el-select v-model="leaveForm.applyType">
                            <el-option label="事假" :value="1"></el-option>
                            <el-option label="年假" :value="2"></el-option>
                            <el-option label="调休" :value="3"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="休假时间">
                        <el-date-picker v-model="datePicker" type="daterange" range-separator="~" start-placeholder="开始日期"
                            end-placeholder="结束日期" @change="dateChange">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item prop="reasons" label="请假原因">
                        <el-input type="textarea" placeholder="请假原因" v-model="leaveForm.reasons">
                        </el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="createLeave">确 定</el-button>
                </div>
            </el-dialog>
            <!-- 表格内容 -->
            <el-table :data="leaveList" style="width: 100%" v-loading="loading">
                <el-table-column prop="orderNo" label="单号" width="130">
                    <template v-slot="{ row }">
                        {{ fotmatOrderNo(row.orderNo) }}
                    </template>
                </el-table-column>
                <el-table-column prop="applyType" label="休假类型" width="80">
                    <template v-slot="{ row }">
                        {{ fotmatApplyType(row.applyType) }}
                    </template>
                </el-table-column>
                <el-table-column prop="reasons" label="原因" width="100">
                    <template v-slot="{ row }">
                        {{ fotmatReasons(row.reasons) }}
                    </template>
                </el-table-column>
                <el-table-column prop="startTime" label="开始时间" width="110">
                    <template v-slot="{ row }">
                        {{ formatDate(row.startTime) }}
                    </template>
                </el-table-column>
                <el-table-column prop="endTime" label="结束时间" width="110">
                    <template v-slot="{ row }">
                        {{ formatDate(row.endTime) }}
                    </template>
                </el-table-column>
                <el-table-column prop="auditFlows" label="审核人" width="150">
                    <template v-slot="{ row }">
                        {{ formatAuditFlows(row.auditFlows) }}
                    </template>
                </el-table-column>
                <el-table-column prop="curAuditUserName" label="当前审核人"></el-table-column>
                <el-table-column prop="applyState" label="审核状态">
                    <template v-slot="{ row }">
                        {{ formatApplyState(row.applyState) }}
                    </template>
                </el-table-column>
                <!-- 操作列 -->
                <el-table-column label="操作" width="180">
                    <template v-slot="{ row }">
                        <!-- 查看按钮 -->
                        <el-button type="primary" size="small" @click="dialogBlock()"
                            style="margin-right:10px">查看</el-button>
                        <!-- 查看申请休假详情~对话框dialog -->
                        <el-dialog title="申请休假详情" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
                            <el-steps :active="3" align-center>
                                <el-step title="待审批"></el-step>
                                <el-step title="审批中"></el-step>
                                <el-step title="审批通过/拒绝"></el-step>
                            </el-steps>
                            <form>
                                <!-- <el-form :inline="true" :model="leaveList" class="demo-form-inline"> -->
                                <el-form :inline="true" class="demo-form-inline">
                                    <!-- <el-form-item prop="applyType" label="休假类型">
                                        <template v-slot="{ row }">
                                            {{ fotmatApplyType(row.applyType) }}
                                        </template>
                                    </el-form-item> -->
                                </el-form>
                            </form>
                            <span slot="footer" class="dialog-footer">
                                <el-button @click="dialogVisible = false">取 消</el-button>
                                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                            </span>
                        </el-dialog>
                        <el-button type="danger" size="small">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
    </div>
</template>

<script>
import { getLeaveListAPI, leaveOperateAPI } from "@/api/approve.js"
export default {
    name: 'Leave',
    data() {
        return {
            dialogFormVisible: false,
            dialogVisible: false,
            loading: false,
            leaveList: [],
            datePicker: [],
            leaveForm: {
                applyType: 1,
                startTime: '',
                endTime: '',
                reasons: '',
            },
            filterForm: {
                applyState: 0,
            },
            page: {
                pageNum: 1,
                pageSize: 10,
                total: 0,
            },
        };
    },
    mounted() {
        this.getLeaveList();
    },
    methods: {
        async getLeaveList() {
            this.loading = true;
            const [data, err] = await getLeaveListAPI({
                ...this.filterForm,
                pageNum: this.page.pageNum,
                pageSize: this.page.pageSize,
            });
            this.loading = false;
            if (err) return;
            this.$message.success('获取请假列表成功');

            this.page.pageNum = data.data.page.pageNum;
            this.page.pageSize = data.data.page.pageSize;
            this.page.total = data.data.page.total;
            this.leaveList = data.data.list;
            // console.log(this.leaveList);
        },
        async createLeave() {
            const [data, err] = await leaveOperateAPI({ ...this.leaveForm, action: 'create' });
            if (err) return;
            this.$message.success('申请成功');
            this.dialogFormVisible = false;
            this.getLeaveList();
        },
        fotmatOrderNo(data) {
            // return orderNo
            return data;
        },
        fotmatApplyType(type) {
            // 1事假 2年假 3调休
            const typeMap = {
                1: '事假',
                2: '年假',
                3: '调休',
            };
            return typeMap[type];
        },
        fotmatReasons(reasons) {
            return reasons;
        },
        formatDate(date) {
            return new Date(date).toLocaleDateString();
        },
        formatApplyState(state) {
            const stateMap = {
                1: '待审批',
                2: '审批中',
                3: '审批拒绝',
                4: '审批通过',
                5: '作废',
            };
            return stateMap[state];
        },
        formatAuditFlows(list) {
            return list.map(user => user.userName).join(',');
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => { });
        },
        dialogBlock() {
            this.dialogVisible = true;
            // fotmatApplyType()
        },
        beforeClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    this.leaveForm.applyType = 1;
                    this.leaveForm.startTime = '';
                    this.leaveForm.endTime = '';
                    this.leaveForm.reasons = '';
                    done();
                })
                .catch(_ => { });
        },
        dateChange() {
            [this.leaveForm.startTime, this.leaveForm.endTime] = this.datePicker;
        },
    },
}
</script>

<style lang="scss" scoped></style>